<template>
  <!-- 顶部title部分 -->
  <div class="header flex-arroud">
    <div class="left flex-box">
<!--      <div class="flex-box">-->
<!--        <img src="../../assets/imgs/home.png" alt="">-->
<!--        <span>多云</span>-->
<!--      </div>-->
<!--      <span>风向西北风</span>-->
<!--      <div class="flex-box">-->
<!--        <span>室外温度</span>-->
<!--        <span class="theme-color">20°</span>-->
<!--      </div>-->
<!--      <div class="flex-box">-->
<!--        <span>室外湿度</span>-->
<!--        <span class="theme-color">20%</span>-->
<!--      </div>-->
    </div>
    <div class="text">数字化实验室系统智能中枢控制系统</div>
    <div class="right flex-reverse">
      <div class="user flex-box ml-20">
        <img src="../../assets/imgs/user.png" alt="">
        <span class="ml-10">荔枝</span>
      </div>
      <div class="home ml-50">
        <img src="../../assets/imgs/home.png" alt="">
      </div>
      <div class="warning ml-50 flex-column-center" @click="warningClick">
        <img src="../../assets/imgs/warning.png" alt="">
      </div>
      <div class="date flex-box">
        <span>{{date}}</span>
        <span  class="ml-50">{{time}}</span>
      </div>
    </div>
    <warning-modal ref="warning" title="告警列表"></warning-modal>
  </div>
</template>
<script>
  import moment from 'moment'
  import warningModal from '../modals/warningModal/index'
  export default {
    name:'myHeader',
    components:{
      warningModal
    },
    data(){
      return{
        date:moment().format("YYYY-MM-DD"),
        time:moment().format("HH:mm:ss"),
        timer:null
      }
    },
    methods:{
      warningClick(){
        this.$refs.warning.showModal()
      }
    },
    created () {
      this.timer = setInterval(()=>{
        this.date = moment().format("YYYY-MM-DD")
        this.time = moment().format("HH:mm:ss")
      },1000)
    },
    destroyed () {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>
<style lang="scss" scoped>
  .header{
    width: 100%;
    height: 218px;
    background: url("../../assets/imgs/header_bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
  .theme-color{
    margin-left: 14px;
  }
  .left{
    flex: 1;
  >*+*{
    margin-left: 74px;
  }
  }
  .right{
    flex: 1;
    .date{
      font-family: number-font;
      font-size: 68px;
      font-style: italic;
      letter-spacing:5px;
    }
    .home{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(0,0,0,0.11);
    }
    .warning{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      justify-content: center;
      cursor: pointer;
    }
    .user{
      border-radius: 25px;
      padding: 10px 20px;
      background: #212838;
    }
  }
  .text{
    font-size: 88px;
    font-weight: bold;
    background: linear-gradient(180deg, #DEF0FF 0%, #77ABF9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 10px;
  }

  }
</style>
